import React from 'react';
import { countNumber, NumberFormat2 } from '@/utils';

/**
 * echarts 图标配置
 * params type:  经营=>Management   交易=>Transaction 售电=>ElectricitySales
 */

const MONTHDATA = [
  '1月',
  '2月',
  '3月',
  '4月',
  '5月',
  '6月',
  '7月',
  '8月',
  '9月',
  '10月',
  '11月',
  '12月',
];

const labelColor = '#888E95';
const lineColor = '#D1D9E9';
const shadowColor = 'rgb(234, 238, 244,0.3)';
const splitLineColor = 'rgba(216, 220, 230, 0.4)';

const CONFIG = (type) => {
  const echartsConfig = {
    Management: {
      legend: {
        left: 'center',
        bottom: '0%',
        itemWidth: 18,
        itemHeight: 12,
        itemGap: 20,
      },
      grid: [
        { bottom: '40%', left: 60, right: 0 },
        { top: '60%', left: 60, right: 0 },
      ],
      xAxis: [
        {
          type: 'category',
          data: MONTHDATA,
          boundaryGap: true,
          axisPointer: {
            type: 'shadow',
            label: { show: false },
            shadowStyle: { color: shadowColor },
          },
          axisLine: { show: false },
          axisLabel: { show: false },
          splitArea: { show: false },
          splitLine: { show: false },
          axisTick: { show: false },
          gridIndex: 0,
        },
        {
          type: 'category',
          data: MONTHDATA,
          boundaryGap: true,
          axisPointer: {
            type: 'shadow',
            label: { show: false },
            shadowStyle: { color: shadowColor },
          },
          nameTextStyle: { color: labelColor },
          axisLabel: { color: labelColor },
          axisLine: { lineStyle: { color: lineColor }, onZero: false },
          gridIndex: 1,
        },
      ],
      yAxis: [
        {
          type: 'value',
          scale: true,
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { color: labelColor },
          splitLine: { lineStyle: { color: splitLineColor } },
          splitNumber: 4,
          min: 0,
          gridIndex: 0,
        },
        {
          type: 'value',
          scale: true,
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { color: labelColor },
          splitLine: { lineStyle: { color: splitLineColor } },
          splitNumber: 2,
          max: 0,
          gridIndex: 1,
        },
      ],
      series: [],
    },
    Transaction: {
      legend: {
        left: 'center',
        bottom: '0%',
        itemWidth: 18,
        itemHeight: 12,
        itemGap: 20,
        icon: 'roundRect',
      },
      grid: [
        { bottom: '45%', left: 60, right: 70 },
        { top: '70%', left: 60, right: 70 },
      ],
      axisPointer: {
        type: 'shadow',
        link: { xAxisIndex: 'all' },
        label: {
          backgroundColor: '#777',
        },
      },
      xAxis: [
        {
          type: 'category',
          data: MONTHDATA,
          boundaryGap: true,
          axisPointer: {
            type: 'shadow',
            label: { show: false },
            shadowStyle: { color: shadowColor },
          },
          nameTextStyle: { color: labelColor },
          axisLabel: { color: labelColor },
          axisLine: { lineStyle: { color: lineColor } },
          gridIndex: 0,
        },
        {
          type: 'category',
          data: MONTHDATA,
          axisPointer: {
            type: 'line',
            shadowStyle: { color: shadowColor },
          },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false },
          splitArea: { show: false },
          splitLine: { show: false },
          gridIndex: 1,
        },
        {
          type: 'category',
          axisLine: { show: false },
          axisLabel: { show: false },
          splitArea: { show: false },
          splitLine: { show: false },
          axisTick: { show: false },
          gridIndex: 0,
        },
      ],
      yAxis: [
        {
          type: 'value',
          gridIndex: 0,
          scale: true,
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { color: labelColor },
          splitLine: { lineStyle: { color: splitLineColor } },
          min: 0,
          splitNumber: 4,
          name: '收入(万元)',
          nameTextStyle: {
            align: 'right',
            color: labelColor,
          },
        },
        {
          type: 'value',
          gridIndex: 1,
          scale: true,
          axisLine: { show: false },
          axisTick: { show: false },

          axisLabel: { color: labelColor },
          splitLine: { lineStyle: { color: splitLineColor } },
          // min: 0,
          splitNumber: 2,
          name: '小时数(h)',
          nameTextStyle: {
            align: 'right',
            color: labelColor,
          },
        },
        {
          type: 'value',
          gridIndex: 0,
          scale: true,
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { color: labelColor },
          splitLine: { show: false, lineStyle: { color: splitLineColor } },
          min: 0,
          splitNumber: 4,
          position: 'right',
          name: '电量(万KWh)',
          nameTextStyle: {
            align: 'left',
            color: labelColor,
          },
        },
      ],
      series: [],
    },
    ElectricitySales: {
      legend: {
        left: 'center',
        bottom: '0%',
        itemWidth: 18,
        itemHeight: 12,
        itemGap: 20,
        icon: 'roundRect',
      },
      grid: [
        { bottom: '45%', left: 70, right: 0 },
        { top: '70%', left: 70, right: 0 },
      ],
      axisPointer: {
        type: 'shadow',
        link: { xAxisIndex: 'all' },
        label: {
          backgroundColor: '#777',
        },
      },
      xAxis: [
        {
          type: 'category',
          data: MONTHDATA,
          gridIndex: 0,
          boundaryGap: true,
          axisPointer: {
            type: 'shadow',
            label: { show: false },
            shadowStyle: { color: shadowColor },
          },
          nameTextStyle: { color: labelColor },
          axisLabel: { color: labelColor },
          axisLine: { lineStyle: { color: lineColor } },
        },
        {
          type: 'category',
          data: MONTHDATA,
          axisPointer: {
            type: 'line',
            shadowStyle: { color: shadowColor },
          },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false },
          splitArea: { show: false },
          splitLine: { show: false },
          gridIndex: 1,
        },
        {
          type: 'category',
          gridIndex: 0,
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false },
          splitArea: { show: false },
          splitLine: { show: false },
        },
      ],
      yAxis: [
        {
          type: 'value',
          gridIndex: 0,
          scale: true,
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { color: labelColor },
          splitLine: { lineStyle: { color: splitLineColor } },
          // min: 0,
          splitNumber: 4,
          name: '电量(万kWh)',
          nameTextStyle: {
            align: 'right',
            color: labelColor,
          },
        },
        {
          type: 'value',
          gridIndex: 1,
          scale: true,
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { color: labelColor },
          splitLine: { lineStyle: { color: splitLineColor } },
          splitNumber: 2,
          name: '毛利润(万元)',
          nameTextStyle: {
            align: 'right',
            color: labelColor,
          },
        },
      ],
      series: [],
    },
  };
  return echartsConfig[type];
};

export const getConfig = (type, max) => {
  return CONFIG(type, max);
};

/**
 * COLUMNS 配置
 */
const columnsRender = (record, key, flag = false) => {
  if (flag) {
    return <span>{record[key] ? record[key] : '-'}</span>;
  }
  return <span>{record.col[key] ? record.col[key] : '-'}</span>;
};

const columnsLvRender = (record, key, flag = false) => {
  if (flag) {
    const value = NumberFormat2(countNumber(record[key], 100, '*'), 2);
    return <span>{record[key] ? `${value}%` : '-'}</span>;
  }
  const value = NumberFormat2(countNumber(record.col[key], 100, '*'), 2);
  return <span>{record.col[key] ? `${value}%` : '-'}</span>;
};

const renderSpan = (text) => <span style={{ lineHeight: '22px' }}>{text}</span>;

export const COLUMNS = {
  Management: [
    {
      title: '类型',
      dataIndex: 'name',
      key: 'name',
      type: '',
      width: 120,
      fixed: true,
      render: (text) => renderSpan(text),
    },
    {
      title: '月计划',
      dataIndex: 'monthPlan',
      key: 'monthPlan',
      type: 'month',
      render: (_, record) => columnsRender(record, 'monthPlan'),
    },
    {
      title: '月实际',
      dataIndex: 'monthReal',
      key: 'monthReal',
      type: 'month',
      render: (_, record) => columnsRender(record, 'monthReal'),
    },
    {
      title: '月完成率',
      dataIndex: 'monthCompletionRate',
      key: 'monthCompletionRate',
      type: 'month',
      render: (_, record) => columnsLvRender(record, 'monthCompletionRate'),
    },
    {
      title: '月计划',
      dataIndex: 'pastMonthPlan',
      key: 'pastMonthPlan',
      type: 'range',
      render: (_, record) => columnsRender(record, 'pastMonthPlan'),
    },
    {
      title: '月实际',
      dataIndex: 'pastMonthReal',
      key: 'pastMonthReal',
      type: 'range',
      render: (_, record) => columnsRender(record, 'pastMonthReal'),
    },
    {
      title: '月完成率',
      dataIndex: 'pastMonthCompletionRate',
      key: 'pastMonthCompletionRate',
      type: 'range',
      render: (_, record) => columnsLvRender(record, 'pastMonthCompletionRate'),
    },
    {
      title: '年计划',
      dataIndex: 'yearPlan',
      key: 'yearPlan',
      type: '',
      render: (_, record) => columnsRender(record, 'yearPlan'),
    },
    {
      title: '年完成率',
      dataIndex: 'yearCompletionRate',
      key: 'yearCompletionRate',
      type: '',
      render: (_, record) => columnsLvRender(record, 'yearCompletionRate'),
    },
  ],
  Transaction: [
    {
      title: '类型',
      dataIndex: 'typeName',
      key: 'typeName',
      type: '',
      width: 120,
      fixed: true,
      render: (text) => renderSpan(text),
    },
    {
      title: '月计划',
      dataIndex: 'oneMonthPlanValue',
      key: 'oneMonthPlanValue',
      type: 'month',
      render: (_, record) => columnsRender(record, 'oneMonthPlanValue', true),
    },
    {
      title: '月实际',
      dataIndex: 'oneMonthActualValue',
      key: 'oneMonthActualValue',
      type: 'month',
      render: (_, record) => columnsRender(record, 'oneMonthActualValue', true),
    },
    {
      title: '月完成率',
      dataIndex: 'oneMonthCompletionRate',
      key: 'oneMonthCompletionRate',
      type: 'month',
      render: (_, record) => columnsLvRender(record, 'oneMonthCompletionRate', true),
    },
    {
      title: '月计划',
      dataIndex: 'manyMonthPlanValue',
      key: 'manyMonthPlanValue',
      type: 'range',
      render: (_, record) => columnsRender(record, 'manyMonthPlanValue', true),
    },
    {
      title: '月实际',
      dataIndex: 'manyMonthActualValue',
      key: 'manyMonthActualValue',
      type: 'range',
      render: (_, record) => columnsRender(record, 'manyMonthActualValue', true),
    },
    {
      title: '月完成率',
      dataIndex: 'manyMonthCompletionRate',
      key: 'manyMonthCompletionRate',
      type: 'range',
      render: (_, record) => columnsLvRender(record, 'manyMonthCompletionRate', true),
    },
    {
      title: '年计划',
      dataIndex: 'yearPlanValue',
      key: 'yearPlanValue',
      type: '',
      render: (_, record) => columnsRender(record, 'yearPlanValue', true),
    },
    {
      title: '年完成率',
      dataIndex: 'yearCompletionRate',
      key: 'yearCompletionRate',
      type: '',
      render: (_, record) => columnsLvRender(record, 'yearCompletionRate', true),
    },
  ],
  ElectricitySales: [
    {
      title: '类型',
      dataIndex: 'typeName',
      key: 'typeName',
      type: '',
      width: 120,
      fixed: true,
      render: (text) => renderSpan(text),
    },
    {
      title: '月计划',
      dataIndex: 'oneMonthPlanValue',
      key: 'oneMonthPlanValue',
      type: 'month',
      render: (_, record) => columnsRender(record, 'oneMonthPlanValue', true),
    },
    {
      title: '月实际',
      dataIndex: 'oneMonthActualValue',
      key: 'oneMonthActualValue',
      type: 'month',
      render: (_, record) => columnsRender(record, 'oneMonthActualValue', true),
    },
    {
      title: '月完成率',
      dataIndex: 'oneMonthCompletionRate',
      key: 'oneMonthCompletionRate',
      type: 'month',
      render: (_, record) => columnsLvRender(record, 'oneMonthCompletionRate', true),
    },
    {
      title: '月计划',
      dataIndex: 'manyMonthPlanValue',
      key: 'manyMonthPlanValue',
      type: 'range',
      render: (_, record) => columnsRender(record, 'manyMonthPlanValue', true),
    },
    {
      title: '月实际',
      dataIndex: 'manyMonthActualValue',
      key: 'manyMonthActualValue',
      type: 'range',
      render: (_, record) => columnsRender(record, 'manyMonthActualValue', true),
    },
    {
      title: '月完成率',
      dataIndex: 'manyMonthCompletionRate',
      key: 'manyMonthCompletionRate',
      type: 'range',
      render: (_, record) => columnsLvRender(record, 'manyMonthCompletionRate', true),
    },
    {
      title: '年计划',
      dataIndex: 'yearPlanValue',
      key: 'yearPlanValue',
      type: '',
      render: (_, record) => columnsRender(record, 'yearPlanValue', true),
    },
    {
      title: '年完成率',
      dataIndex: 'yearCompletionRate',
      key: 'yearCompletionRate',
      type: '',
      render: (_, record) => columnsLvRender(record, 'yearCompletionRate', true),
    },
  ],
};

/** 单位 unit */
export const UNITMAP = {
  Management: ['万元', '万元', '万元', '万元', ''],
  Transaction: ['万元', '万元', '万kWh', '万kWh', 'h', 'h'],
  ElectricitySales: ['万kWh', '万kWh', '万kWh', '万kWh', '万元', '万元'],
};
/* tooltip 色值 */
export const TOOLTIPCOLOR = {
  Management: ['rgba(40, 178, 139,0.6)', '#28B28B', '#8EBDF3', '#1E7CE8'],
  Transaction: ['#69C9AE', '#28B28B', '#8EBDF3', '#1E7CE8', '#FF9500', '#ED5945'],
  ElectricitySales: [
    '#8EBDF3',
    'rgb(30, 124, 232)',
    'rgba(40, 178, 139,0.6)',
    '#28B28B',
    '#5AC8FA',
    '#1E7CE8',
  ],
};

export const TOOLTIP = (_onToopFormatter) => {
  return {
    trigger: 'axis',
    extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)',
    backgroundColor: 'rgba(255, 255, 255, 1)',
    textStyle: {
      color: labelColor,
      borderWidth: 1,
      borderColor: '#1A253C4B',
      padding: 12,
    },
    axisPointer: {
      type: 'cross',
      label: { backgroundColor: '#F5F8FA', color: labelColor, shadowBlur: 0 },
    },
    formatter: (params) => {
      _onToopFormatter(params);
    },
  };
};
